<template>
  <div>
    <Alert type="success">
      系统资源
      <template slot="desc">系统资源默认访问权限，新授权的资源将具有默认的访问权限。 </template>
    </Alert>
    <Form ref="formInline" :model="map" inline>
      <div class="search">
        <Button type="primary" class="fl" icon="plus" @click="add">增加资源</Button>
        <FormItem>
          <Input type="text" v-model="map.key" placeholder="关键字"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="getList">查询</Button>
        </FormItem>
      </div>
    </Form>
    <Table border stripe :loading="loading" :columns="columns" :data="data && data.data"></Table>
    <Page class="page" :total="data && data.count" :page-size="data && data.pagesize" show-total @on-change="changePage"></Page>

  </div>
</template>
<script>
  import { resource ,roleAuth} from "@/api";
  import { Button, Table, Page, Form, FormItem, Input,Select,Alert, Option } from 'iview';
  export default {
    components: {
      Button,
      Table,
      Page,
      Form,
      FormItem,
      Input,
      Select,
      Option,
      Alert
    },
    data() {
      return {
        loading: true,
        columns: [
          {
            title: "资源",
            key: "title"
          },
          {
            title: "路由",
            key: "path"
          },
          {
            title: "GET",
            key: "get",
            //width: 400,
            align: "center",
            render: (h, params) => {
              return h("div", [
                h(
                  "i-switch",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                      value: params.row.get === 1
                    },
                    style: {
                      //marginRight: "5px"
                    },
                    on: {
                      "on-change": (status) => {
                        const id = params.row.id;
                        let data = {id: id, get: status ? 1 : 0};
                        resource.update(id, data)
                      }
                    }
                  },
                ),
              ]);
            }
          },


          {
            title: "POST",
            key: "post",
            //width: 400,
            align: "center",
            render: (h, params) => {
              return h("div", [
                h(
                  "i-switch",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                      value: params.row.post === 1
                    },
                    style: {
                      //marginRight: "5px"
                    },
                    on: {
                      "on-change": (status) => {
                        const id = params.row.id;
                        let data = {id: id, post: status ? 1 : 0};
                        resource.update(id, data)
                      }
                    }
                  },
                ),
              ]);
            }
          },
          {
            title: "PUT",
            key: "put",
            //width: 400,
            align: "center",
            render: (h, params) => {
              return h("div", [
                h(
                  "i-switch",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                      value: params.row.put === 1
                    },
                    style: {
                      //marginRight: "5px"
                    },
                    on: {
                      "on-change": (status) => {
                        const id = params.row.id;
                        let data = {id: id, put: status ? 1 : 0};
                        resource.update(id, data)
                      }
                    }
                  },
                ),
              ]);
            }
          },
          {
            title: "DELETE",
            key: "delete",
            //width: 400,
            align: "center",
            render: (h, params) => {
              return h("div", [
                h(
                  "i-switch",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                      value: params.row.delete === 1
                    },
                    style: {
                      //marginRight: "5px"
                    },
                    on: {
                      "on-change": (status) => {
                        const id = params.row.id;
                        let data = {id: id, delete: status ? 1 : 0};
                        resource.update(id, data)
                      }
                    }
                  },
                ),
              ]);
            }
          },
          {
            title: "操作",
            key: "action",
            width: 400,
            align: "center",
            render: (h, params) => {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                      // icon:'ios-list'
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          path: "/ucenter/resource/save",
                          query: {
                            id: params.row.id
                          }
                        });
                      }
                    }
                  },
                  '编辑'
                ),

                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small",
                      // icon:'trash-a'
                    },
                    on: {
                      click: () => {
                        if (confirm("确定要删除吗？")) {
                          this.delete(params.row.id, params.index);
                        }
                      }
                    },

                  },
                  '删除'

                )
              ]);
            }
          }
        ],
        data: {},
        map:{
          page:1,
          key:"",
          pageSize:10,
        }
      };
    },
    methods: {
      getList() {
        this.loading=true;
        resource.getList(this.map).then(res => {
          this.data = res.data;
          this.loading = false;
        });
      },
      delete(id, index) {
        resource.delete(id).then(res => {
          // this.data.splice(index, 1);
          this.getList();
        });
      },
      changePage(index){
        this.map.page=index;
        this.getList();
      },
      add(){
        this.$router.push('/ucenter/resource/save');
      }
    },
    mounted() {
      this.getList();
    }
  };
</script>
